<%-- 
    Document   : testDatePicker
    Created on : 2017-9-20, 17:46:32
    Author     : Administrator
--%>

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>数据查询</title>
        <link rel="stylesheet" type="text/css" href="extjs/build/classic/theme-crisp/resources/theme-crisp-all.css">
        <link rel="stylesheet" type="text/css" href="extjs/build/classic/theme-crisp/resources/theme-crisp-all-debug.css">
        <!--<link rel="stylesheet" type="text/css" href="jquery/bootstrap.min.css">-->

        <script type="text/javascript" charset="UTF-8" src="extjs/build/ext-bootstrap.js"></script>
        <script type="text/javascript" charset="UTF-8" src="extjs/build/ext-all_new.js"></script>
        <script type="text/javascript" charset="UTF-8" src="extjs/build/ext-all-debug.js"></script>
        <script type="text/javascript" charset="UTF-8" src="extjs/build/classic/locale/locale-zh_CN.js"></script>
        <script type="text/javascript" charset="UTF-8" src="extjs/build/classic/locale/locale-zh_CN-debug.js"></script>
        <script type="text/javascript" charset="UTF-8" src="extjs/build/DateTimeField.js"></script>
        <script type="text/javascript" charset="UTF-8" src="extjs/build/Spinner.js"></script>
        <script type="text/javascript" charset="UTF-8" src="extjs/build/SpinnerField.js"></script>
        <script type="text/javascript" charset="UTF-8" src="extjs/build/datetimer.js"></script>

        <script type="text/javascript">
            Ext.onReady(function () {
                Ext.tip.QuickTipManager.init();//初始化提示
                Ext.Loader.setConfig({enabled: true});
                Ext.Loader.setPath('MyApp', '../../jsp');
                Ext.MessageBox.alert("提示", "这是一开始");

                Ext.define('MyApp.ux.DateTimeField', {
                    extend: 'Ext.form.field.Date',
                    alias: 'widget.datetimefield',
                    requires: ['MyApp.ux.DateTimePicker'],
                    initComponent: function () {

                        this.format = this.format;

                        this.callParent();

                    },
                    // overwrite

                    createPicker: function () {

                        var me = this,
                                format = Ext.String.format;

                        return Ext.create('MyApp.ux.DateTimePicker', {
                            ownerCt: me.ownerCt,
                            renderTo: document.body,
                            floating: true,
                            hidden: true,
                            focusOnShow: true,
                            minDate: me.minValue,
                            maxDate: me.maxValue,
                            disabledDatesRE: me.disabledDatesRE,
                            disabledDatesText: me.disabledDatesText,
                            disabledDays: me.disabledDays,
                            disabledDaysText: me.disabledDaysText,
                            format: me.format,
                            showToday: me.showToday,
                            startDay: me.startDay,
                            minText: format(me.minText, me.formatDate(me.minValue)),
                            maxText: format(me.maxText, me.formatDate(me.maxValue)),
                            listeners: {
                                scope: me,
                                select: me.onSelect

                            },
                            keyNavConfig: {
                                esc: function () {

                                    me.collapse();

                                }

                            }

                        });

                    }

                });

                var form = new Ext.form.FormPanel({
                    title: '表单输入控件演示',
                    width: 500,
                    frame: true,
                    id:"formId",
                    items: [{
                            xtype: 'datetimefield',
                            width: 300,
                            labelWidth: 80,
                            endDateField: 'etime',
                            vtype: 'daterange',
                            fieldLabel: '开始时间',
                            format: 'Y-m-d H:i:s ',
                            name: 'stime'

                        },
                        {
                            xtype: 'datetimefield',
                            width: 300,
                            labelWidth: 80,
                            startDateField: 'stime',
                            vtype: 'daterange',
                            fieldLabel: '结束时间',
                            format: 'Y-m-d H:i:s ',
                            name: 'etime'

                        }],
                });
                var panel = Ext.create('Ext.panel.Panel', {
                    layout: 'border',
                    text:"asdasda",
                    width: Ext.getBody().getViewSize().width,
                    height: Ext.getBody().getViewSize().height,
                    autoScroll: true,
                    bodyStyle: 'overflow-x:hidden; overflow-y:hidden',
                    items: [
                        form
                    ],
                    renderTo: Ext.getBody()
                });


            });
        </script>        
    </head>
    <body>
        <h1>Hello World!</h1>
        <div id="idddd"></div>
    </body>
</html>
